<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="80%"
    :fullscreen="true"
    @close="close"
		:showFooter="false"
  >
    <template #title_content>
      <div style="position: absolute; right: 200px;top: 0;">
        <el-radio-group v-model="queryParams.winner" @change="handleChangeRadio">
          <el-radio-button label="0">全  部</el-radio-button>
          <el-radio-button label="1">中奖用户</el-radio-button>
        </el-radio-group>
      </div>
    </template>
		<div>
        <el-form>
          <el-row>
            <el-col :span="24">
              <el-table
                :data="listData"
                v-loading="loading"
                ref="table"
                style="margin-top: 20px"
              >
              <el-table-column label="#" type="index" align="left" />
                <!-- <el-table-column label="编号" prop="couponId" align="left" /> -->
                <el-table-column label="活动名称" prop="activityName" align="left" />
                <el-table-column label="所属商家" align="left">
                  <template #default="scope">
                    <span>{{ scope.row.storeId==0 ? '全部' : shopList.find(item=>item.id==scope.row.storeId) ? shopList.find(item=>item.id==scope.row.storeId).name : '--' }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="用户手机号" prop="userMobile" align="left" />
<!--                <el-table-column label="参与人数" prop="partNum" align="left" />-->
<!--                <el-table-column label="抽奖积分" prop="integral" align="left" />-->
<!--                <el-table-column label="活动图片" prop="images" align="left">-->
<!--                  <template #default="scope">-->
<!--                    <div style="display: flex;justify-content: flex-start;">-->
<!--                      <ImagePreview style="width: 40px;height: 40px;" v-for="item in scope.row.images.split(',')" :key="item" :src="item"></ImagePreview>-->
<!--                    </div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column label="抽奖时间" prop="drawTime" align="left" />
                <el-table-column label="抽奖号码" prop="drawNo" align="left" />
                <el-table-column label="奖品等级" prop="images" align="left">
                  <template #default="scope">
                    {{ 
                      scope.row.prizeLevel==0 ? '未中奖' 
                      : scope.row.prizeLevel==1 ? '一等奖' 
                      : scope.row.prizeLevel==2 ? '二等奖' 
                      : scope.row.prizeLevel==3 ? '三等奖' 
                      : scope.row.prizeLevel==4 ? '四等奖' 
                      : scope.row.prizeLevel==5 ? '五等奖' 
                      : scope.row.prizeLevel==6 ? '六等奖' 
                      : ''
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="收货地址信息" align="left">
                    <template #default="scope">
                        <div style="display: flex; flex-direction: column;">
                            <span v-if="scope.row.contactsName"><span>收货人：</span> <span>{{ scope.row.contactsName || '--' }}</span></span>
                            <span v-if="scope.row.contactsMobile"><span>手机号：</span> <span>{{ scope.row.contactsMobile || '--' }}</span></span>
                            <span  v-if="scope.row.contactsAddress"><span class="label">收货地址：</span> <span>{{ scope.row.contactsAddress || '--' }}</span></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="发货信息" align="left">
                  <template #default="scope">
                      <div style="display: flex; flex-direction: column;">
                          <span v-if="scope.row.expressCompany"><span>快递公司：</span> <span>{{ scope.row.expressCompany || '--' }}</span></span>
                          <span  v-if="scope.row.expressNo"><span class="label">快递单号：</span> <span>{{ scope.row.expressNo || '--' }}</span></span>
                      </div>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="left" />
                <el-table-column fixed="right" label="操作" align="center" min-width="160px">
                  <template #default="scope">
                    <div style="display: flex; justify-content: center">
                      <el-button
                        v-if="scope.row.prizeLevel && scope.row.exchangeFlag==0"
                        type="primary"
                        size="small"
                        @click="$refs.duihuanFormRef.init('edit', scope.row)"
                        >发货</el-button
                      >
                      <span v-else>--</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <duihuanForm ref="duihuanFormRef" v-if="!loading" @ok="getList"/>
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import duihuanForm from "./duihuan.vue"
import {  useInfoTwoApi } from '@/api/operates/active.js'
// import { listPage as shopListApi } from '@/api/operates/shopList/index'

const { proxy } = getCurrentInstance()
const emit = defineEmits(["success"]);
const dialogType = ref('')
const shopList = ref([])
const dialog = reactive({
  visible: false,
  title: "",
});
const rules = reactive({});
const loading = ref(false);
const total = ref(0)
const queryParams = ref({
	winner: 0
})
const search = ref({})
const listData = ref([])

function handleChangeRadio(e){
  setTimeout(()=>{
    getList()
  }, 200)
}
function init(type,list, record){
  shopList.value = [
		// {id:0, name:'全部'},
		...list
	]
	dialogType.value = type
	dialog.title='用户参与记录'
	dialog.visible = true
	// 如果是编辑，回显数据
	if(dialogType.value=='edit'){
		queryParams.value = { winner:queryParams.value.winner, ...record };
		// 查询表格
		getList()
	}
};

//获取列表数据
const getList = () => {
  loading.value = true
  let query = {
    path:{
			id: queryParams.value.id,
      
		},
		query: {
      // pageNum: 1,
      // pageSize: 100000,
      ...search.value,
      winner: queryParams.value.winner
    }
  }
  useInfoTwoApi(query)
    .then(res => {
      listData.value = res.data
      // total.value = res.data.total
      loading.value = false
    })
    .catch(err => {
      loading.value = false
      ElMessage.error(err.message || `${text}失败`)
    })
}

// function getShopList(){
//   shopListApi({pageNum:1, pageSize:100000}).then((res)=>{
//     shopList.value = res.data.list
//   })
// }
function close(){
  dialog.visible = false;
  // proxy.$refs.formRef.resetFields();
	queryParams.value = {
    winner:0
  }
};
defineExpose({ init });
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* ::v-deep .el-input__wrapper{
	width: 100%;
} */
</style>
